<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">按键KeyCode</h2>
      </div>
      <div class="form-group">
        <label class="form-label">按下按键查看键值</label>
        <textarea
          type="text" class="form-textarea form-textarea-neat"
          rows="3"
          @keydown="handleKeyDown"
        ></textarea>
        <h4 class="text-strong">当前键值是：<span class="text-danger">{{ keycode }}</span></h4>
        <h4 class="text-strong">
          <span>shiftKey：</span><span class="text-danger">{{ isShiftKey ? '是' : '否' }}&emsp;</span>
          <span>altKey：</span><span class="text-danger">{{ isAltKey ? '是' : '否' }}&emsp;</span>
          <span>ctrlKey：</span><span class="text-danger">{{ isCtrlKey ? '是' : '否' }}</span>
        </h4>
      </div>
      <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th colspan="8">字母和数字键的键码值(KeyCode)</th>
          </tr>
          <tr>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>A</td>
            <td>65</td>
            <td>J</td>
            <td>74</td>
            <td>S</td>
            <td>83</td>
            <td>1</td>
            <td>49</td>
          </tr>
          <tr>
            <td>B</td>
            <td>66</td>
            <td>K</td>
            <td>75</td>
            <td>T</td>
            <td>84</td>
            <td>2</td>
            <td>50</td>
          </tr>
          <tr>
            <td>C</td>
            <td>67</td>
            <td>L</td>
            <td>76</td>
            <td>U</td>
            <td>85</td>
            <td>3</td>
            <td>51</td>
          </tr>
          <tr>
            <td>D</td>
            <td>68</td>
            <td>M</td>
            <td>77</td>
            <td>V</td>
            <td>86</td>
            <td>4</td>
            <td>52</td>
          </tr>
          <tr>
            <td>E</td>
            <td>69</td>
            <td>N</td>
            <td>78</td>
            <td>W</td>
            <td>87</td>
            <td>5</td>
            <td>53</td>
          </tr>
          <tr>
            <td>F</td>
            <td>70</td>
            <td>O</td>
            <td>79</td>
            <td>X</td>
            <td>88</td>
            <td>6</td>
            <td>54</td>
          </tr>
          <tr>
            <td>G</td>
            <td>71</td>
            <td>P</td>
            <td>80</td>
            <td>Y</td>
            <td>89</td>
            <td>7</td>
            <td>55</td>
          </tr>
          <tr>
            <td>H</td>
            <td>72</td>
            <td>Q</td>
            <td>81</td>
            <td>Z</td>
            <td>90</td>
            <td>8</td>
            <td>56</td>
          </tr>
          <tr>
            <td>I</td>
            <td>73</td>
            <td>R</td>
            <td>82</td>
            <td>0</td>
            <td>48</td>
            <td>9</td>
            <td>57</td>
          </tr>
        </tbody>
      </table>
      <table class="table table-bordered table-striped table-hover mt-lg">
        <thead>
          <tr>
            <th colspan="4" width="50%">数字键盘上的键的键码值(KeyCode)</th>
            <th colspan="4" width="50%">功能键键码值(KeyCode)</th>
          </tr>
          <tr>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>0</td>
            <td>96</td>
            <td>8</td>
            <td>104</td>
            <td>F1</td>
            <td>112</td>
            <td>F7</td>
            <td>118</td>
          </tr>
          <tr>
            <td>1</td>
            <td>97</td>
            <td>9</td>
            <td>105</td>
            <td>F2</td>
            <td>113</td>
            <td>F8</td>
            <td>119</td>
          </tr>
          <tr>
            <td>2</td>
            <td>98</td>
            <td>*</td>
            <td>106</td>
            <td>F3</td>
            <td>114</td>
            <td>F9</td>
            <td>120</td>
          </tr>
          <tr>
            <td>3</td>
            <td>99</td>
            <td>+</td>
            <td>107</td>
            <td>F4</td>
            <td>115</td>
            <td>F10</td>
            <td>121</td>
          </tr>
          <tr>
            <td>4</td>
            <td>100</td>
            <td>Enter</td>
            <td>108</td>
            <td>F5</td>
            <td>116</td>
            <td>F11</td>
            <td>122</td>
          </tr>
          <tr>
            <td>5</td>
            <td>101</td>
            <td>-</td>
            <td>109</td>
            <td>F6</td>
            <td>117</td>
            <td>F12</td>
            <td>123</td>
          </tr>
          <tr>
            <td>6</td>
            <td>102</td>
            <td>.</td>
            <td>110</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>7</td>
            <td>103</td>
            <td>/</td>
            <td>111</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
      <table class="table table-bordered table-striped table-hover mt-lg">
        <thead>
          <tr>
            <th colspan="8">控制键键码值(KeyCode)</th>
          </tr>
          <tr>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
            <th style="color:#003399">按键</th>
            <th style="color:#996600">键码</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>BackSpace</td>
            <td>8</td>
            <td>Esc</td>
            <td>27</td>
            <td>Right Arrow</td>
            <td>39</td>
            <td>-_</td>
            <td>189</td>
          </tr>
          <tr>
            <td>Tab</td>
            <td>9</td>
            <td>Spacebar</td>
            <td>32</td>
            <td>Down Arrow</td>
            <td>40</td>
            <td>.&gt;</td>
            <td>190</td>
          </tr>
          <tr>
            <td>Clear</td>
            <td>12</td>
            <td>Page Up</td>
            <td>33</td>
            <td>Insert</td>
            <td>45</td>
            <td>/?</td>
            <td>191</td>
          </tr>
          <tr>
            <td>Enter</td>
            <td>13</td>
            <td>Page Down</td>
            <td>34</td>
            <td>Delete</td>
            <td>46</td>
            <td>`~</td>
            <td>192</td>
          </tr>
          <tr>
            <td>Shift</td>
            <td>16</td>
            <td>End</td>
            <td>35</td>
            <td>Num Lock</td>
            <td>144</td>
            <td>[{</td>
            <td>219</td>
          </tr>
          <tr>
            <td>Control</td>
            <td>17</td>
            <td>Home</td>
            <td>36</td>
            <td>;:</td>
            <td>186</td>
            <td>/|</td>
            <td>220</td>
          </tr>
          <tr>
            <td>Alt</td>
            <td>18</td>
            <td>Left Arrow</td>
            <td>37</td>
            <td>=+</td>
            <td>187</td>
            <td>]}</td>
            <td>221</td>
          </tr>
          <tr>
            <td>Cape Lock</td>
            <td>20</td>
            <td>Up A</td>
          </tr>
        </tbody>
      </table>
      <div class="mt-lg">
        <h5><strong>数字排序</strong></h5>
        <textarea
          type="text" class="form-textarea"
          rows="12"
          readonly
          v-model="codes"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
/* JSON转换 */
export default {
  data () {
    return {
      keycode: '',
      isShiftKey: false,
      isAltKey: false,
      isCtrlKey: false,
      codes: `
        keycode 0 =
        keycode 1 =
        keycode 2 =
        keycode 3 =
        keycode 4 =
        keycode 5 =
        keycode 6 =
        keycode 7 =
        keycode 8 = BackSpace
        keycode 9 = Tab
        keycode 10 =
        keycode 11 =
        keycode 12 = Clear
        keycode 13 = Enter
        keycode 14 =
        keycode 15 =
        keycode 16 = Shift_L
        keycode 17 = Control_L
        keycode 18 = Alt_L
        keycode 19 = Pause
        keycode 20 = Caps_Lock
        keycode 21 =
        keycode 22 =
        keycode 23 =
        keycode 24 =
        keycode 25 =
        keycode 26 =
        keycode 27 = Esc Escape
        keycode 28 =
        keycode 29 =
        keycode 30 =
        keycode 31 =
        keycode 32 = Space
        keycode 33 = Page Up
        keycode 34 = Page Down
        keycode 35 = End
        keycode 36 = Home
        keycode 37 = Left Arrow
        keycode 38 = Up Arrow
        keycode 39 = Right Arrow
        keycode 40 = Down Arrow
        keycode 41 = Select
        keycode 42 = Print
        keycode 43 = Execute
        keycode 44 =
        keycode 45 = Insert
        keycode 46 = Delete
        keycode 47 = Help
        keycode 48 = 0 )
        keycode 49 = 1 !
        keycode 50 = 2 @
        keycode 51 = 3 #
        keycode 52 = 4 $
        keycode 53 = 5 %
        keycode 54 = 6 ^
        keycode 55 = 7 &
        keycode 56 = 8 *
        keycode 57 = 9 (
        keycode 58 =
        keycode 59 =
        keycode 60 =
        keycode 61 =
        keycode 62 =
        keycode 63 =
        keycode 64 =
        keycode 65 = a A
        keycode 66 = b B
        keycode 67 = c C
        keycode 68 = d D
        keycode 69 = e E
        keycode 70 = f F
        keycode 71 = g G
        keycode 72 = h H
        keycode 73 = i I
        keycode 74 = j J
        keycode 75 = k K
        keycode 76 = l L
        keycode 77 = m M
        keycode 78 = n N
        keycode 79 = o O
        keycode 80 = p P
        keycode 81 = q Q
        keycode 82 = r R
        keycode 83 = s S
        keycode 84 = t T
        keycode 85 = u U
        keycode 86 = v V
        keycode 87 = w W
        keycode 88 = x X
        keycode 89 = y Y
        keycode 90 = z Z
        keycode 91 =
        keycode 92 =
        keycode 93 =
        keycode 94 =
        keycode 95 =
        keycode 96 = KP_0
        keycode 97 = KP_1
        keycode 98 = KP_2
        keycode 99 = KP_3
        keycode 100 = KP_4
        keycode 101 = KP_5
        keycode 102 = KP_6
        keycode 103 = KP_7
        keycode 104 = KP_8
        keycode 105 = KP_9
        keycode 106 = KP_* KP_Multiply
        keycode 107 = KP_+ KP_Add
        keycode 108 = KP_Enter KP_Separator
        keycode 109 = KP_- KP_Subtract
        keycode 110 = KP_. KP_Decimal
        keycode 111 = KP_/ KP_Divide
        keycode 112 = F1
        keycode 113 = F2
        keycode 114 = F3
        keycode 115 = F4
        keycode 116 = F5
        keycode 117 = F6
        keycode 118 = F7
        keycode 119 = F8
        keycode 120 = F9
        keycode 121 = F10
        keycode 122 = F11
        keycode 123 = F12
        keycode 124 = F13
        keycode 125 = F14
        keycode 126 = F15
        keycode 127 = F16
        keycode 128 = F17
        keycode 129 = F18
        keycode 130 = F19
        keycode 131 = F20
        keycode 132 = F21
        keycode 133 = F22
        keycode 134 = F23
        keycode 135 = F24
        keycode 136 = Num_Lock
        keycode 137 = Scroll_Lock
        keycode 138 =
        keycode 139 =
        keycode 140 =
        keycode 141 =
        keycode 142 =
        keycode 143 =
        keycode 144 =
        keycode 145 =
        keycode 146 =
        keycode 147 =
        keycode 148 =
        keycode 149 =
        keycode 150 =
        keycode 151 =
        keycode 152 =
        keycode 153 =
        keycode 154 =
        keycode 155 =
        keycode 156 =
        keycode 157 =
        keycode 158 =
        keycode 159 =
        keycode 160 =
        keycode 161 =
        keycode 162 =
        keycode 163 =
        keycode 164 =
        keycode 165 =
        keycode 166 =
        keycode 167 =
        keycode 168 =
        keycode 169 =
        keycode 170 =
        keycode 171 =
        keycode 172 =
        keycode 173 =
        keycode 174 =
        keycode 175 =
        keycode 176 =
        keycode 177 =
        keycode 178 =
        keycode 179 =
        keycode 180 =
        keycode 181 =
        keycode 182 =
        keycode 183 =
        keycode 184 =
        keycode 185 =
        keycode 186 =
        keycode 187 = =+
        keycode 188 = ,<
        keycode 189 = -_
        keycode 190 = .>
        keycode 191 = /?
        keycode 192 = ${'`'}~
        keycode 193 =
        keycode 194 =
        keycode 195 =
        keycode 196 =
        keycode 197 =
        keycode 198 =
        keycode 199 =
        keycode 200 =
        keycode 201 =
        keycode 202 =
        keycode 203 =
        keycode 204 =
        keycode 205 =
        keycode 206 =
        keycode 207 =
        keycode 208 =
        keycode 209 =
        keycode 210 = plusminus hyphen macron
        keycode 211 =
        keycode 212 = copyright registered
        keycode 213 = guillemotleft guillemotright
        keycode 214 = masculine ordfeminine
        keycode 215 = ae AE
        keycode 216 = cent yen
        keycode 217 = questiondown exclamdown
        keycode 218 = onequarter onehalf threequarters
        keycode 219 = [{
        keycode 220 = ${'\\|'}
        keycode 221 = ]}
        keycode 222 = '"
        keycode 223 =
        keycode 224 =
        keycode 225 =
        keycode 226 =
        keycode 227 = multiply division
        keycode 228 = acircumflex Acircumflex
        keycode 229 = ecircumflex Ecircumflex
        keycode 230 = icircumflex Icircumflex
        keycode 231 = ocircumflex Ocircumflex
        keycode 232 = ucircumflex Ucircumflex
        keycode 233 = ntilde Ntilde
        keycode 234 = yacute Yacute
        keycode 235 = oslash Ooblique
        keycode 236 = aring Aring
        keycode 237 = ccedilla Ccedilla
        keycode 238 = thorn THORN
        keycode 239 = eth ETH
        keycode 240 = diaeresis cedilla currency
        keycode 241 = agrave Agrave atilde Atilde
        keycode 242 = egrave Egrave
        keycode 243 = igrave Igrave
        keycode 244 = ograve Ograve otilde Otilde
        keycode 245 = ugrave Ugrave
        keycode 246 = adiaeresis Adiaeresis
        keycode 247 = ediaeresis Ediaeresis
        keycode 248 = idiaeresis Idiaeresis
        keycode 249 = odiaeresis Odiaeresis
        keycode 250 = udiaeresis Udiaeresis
        keycode 251 = ssharp question backslash
        keycode 252 = asciicircum degree
        keycode 253 = 3 sterling
        keycode 254 = Mode_switch
      `
    }
  },

  methods: {
    /**
     * @function 监听按键按下
    */
    handleKeyDown (e) {
      this.keycode = e.keyCode
      this.isShiftKey = false
      this.isAltKey = false
      this.isCtrlKey = false
      if (e.shiftKey) {
        this.isShiftKey = true
      }
      if (e.altKey) {
        this.isAltKey = true
      }
      if (e.ctrlKey) {
        this.isCtrlKey = true
      }
      console.log(e)
    }
  }
}
</script>

<style lang="less">

</style>
